<template>
  <div class="DetailBaseInfo">
     <p>{{baseInfoGoods.title}}</p>

     <div class="price">
        <span  class="newPrice">{{baseInfoGoods.newPrice}}</span>
        <span class="oldPrice">{{baseInfoGoods.oldPrice}}</span>
        <span class="discount">{{baseInfoGoods.discount}}</span>
     </div>
    <div class="columns" >
     <div v-for="item in baseInfoGoods.columns"  class="itemColumn">
        <span>{{item}}</span>
     </div>
    </div>

      <div class="services">
          <div v-for="item in baseInfoGoods.services" class="itemService">
              <span><img :src="item.icon" alt="">{{item.name}}</span>
          </div>
      </div>
  </div>

</template>

<script>
  export default {
  name:'DetailBaseInfo',
  props:{
   baseInfoGoods:{
   type:Object,
   default(){
         return {}
   }

   }
  },


  }
</script>

<style  scoped>
.DetailBaseInfo{
 position: relative;
 /* z-index: 15;必须在定位中才有效 */
  z-index: 15;
  background-color: white;
 }
 .DetailBaseInfo p {
  font-size: 18px;
  color: black;
 padding: 15px 10px 15px 10px;
 font-weight:500;

 }
 .price{
position: relative;
height: 34px;
}
.newPrice{
  color:#ec5972;
  font-size: 25px;
  margin-left: 10px;
}
.oldPrice{
color: #acaaaa;
margin-left: 8px;
text-decoration:line-through;
font-size: 16px;
}
.discount{
  background-color: rgb(241, 118, 135);
  color: whitesmoke;
 font-family:fantasy;
margin-left: 6px;
border-radius: 8px;
padding:3px;
position: absolute;
top: -6px;
text-align: center;
font-size: 13px;

}
.columns{
 display: flex;
 justify-content: space-around;
 margin-top: 10px;
 padding-bottom: 15px;
 border-bottom: 2px solid rgb(247, 242, 242);
}
.itemColumn{
 flex: 1;
 text-align: center;
 font-size: 13px;
 color: rgb(196, 196, 196);
}
.services{
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
margin: 15px 5px 10px 3px;
border-bottom: 4px solid #ebe9e9;
padding-bottom: 30px;
}
.itemService{

font-size: 15px;
white-space:nowrap;
margin-left: 13px;
margin-top: 5px;
text-align: center;

}
.itemService img{
height: 15px;
padding-top: 3px;

}

</style>
